<template>
  <div class="login-container">
    <!--    <h2 class="login-title">kkkkkba srerch</h2>-->
    <a-form ref="form" class="login-form">
      <a-typography-title :level="2" class="title">Log In System</a-typography-title>
      <a-form-item v-bind="validateInfos.username" label="用户名">
        <a-input
          class="inputBox"
          v-model:value="from.username"
          placeholder="Username"
        >
          <template #prefix>
            <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item v-bind="validateInfos.password" label="&ensp;密码&ensp;">
        <a-input
          class="inputBox"
          v-model:value="from.password"
          type="password"
          placeholder="Password"
        >
          <template #prefix>
            <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item v-bind="validateInfos.validate" label="验证码">
        <a-input
          class="inputBox"
          style="height: 45px"
          v-model:value="from.validate"
          placeholder="Captcha"
        >
          <template #prefix>
            <PictureOutlined style="color: rgba(0, 0, 0, 0.25)" />
          </template>
          <template #addonAfter>
            <img @click="UpdateValidate" :src="captcha" height="30" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button
          type="primary"
          class="submit"
          html-type="submit"
          @click="onSubmit"
        >
          Log in
        </a-button>
        <div style="width: 100%; display: flex; justify-content: center">
          没有账号？<a @click="gotoRegister">点此注册</a>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRaw } from "vue";
import {
  LockOutlined,
  PictureOutlined,
  UserOutlined,
} from "@ant-design/icons-vue";
import { Form, message } from "ant-design-vue";
import myAxios from "@/plugins/myAxios";
import router from "@/router";

const gotoRegister = () => {
  router.push("/register");
};
const rulesRef = reactive({
  username: [
    {
      required: true,
      message: "Please input username",
    },
  ],
  password: [
    {
      required: true,
      message: "Please input password",
    },
  ],
  validate: [
    {
      required: true,
      message: "Please input validate",
    },
  ],
});
const from = reactive({
  username: "",
  password: "",
  validate: "",
});
const useForm = Form.useForm;
const { validate, validateInfos } = useForm(from, rulesRef);
const onSubmit = () => {
  validate()
    .then(() => {
      let ans ;
      myAxios
        .post(`/validate?code=${from.validate}`)
        .then((res: any) => {
          console.log(res);
          ans = res.data
        });
      console.log(ans);
      if (ans) {
        login(from);
        console.log(toRaw(from));
      } else {
        message.error("验证码错误");
      }
    })
    .catch(() => {
      if (from.username === "" || from.password === "") {
        message.error(
          `请将${from.username === "" ? "账号" : ""}${
            from.password === "" ? "密码" : ""
          }填写完整`
        );
      }
    });
};

interface fromInit {
  username: string;
  password: string;
  validate: string;
}

const login = (form: fromInit) => {
  const Query = {
    userAccount: form.username,
    userPassword: form.password,
  };
  myAxios.post("/user/login", Query).then((res: any) => {
    console.log(res);
    if (res !== null) {
      localStorage.setItem("isLogin","true");
      localStorage.setItem("id",res.id);
      localStorage.setItem("userRole",res.userRole);
      message.success("登录成功");
      router.push("/search/post");
    } else {
      message.error("账号或密码错误");
    }
  });
};

let captcha = ref("");
const UpdateValidate = () => {
  captcha = ref(myAxios.defaults.baseURL + "captcha");
};
UpdateValidate();
</script>

<style scoped lang="less">
.login-form {
  width: 565px;
  height: 372px+65px;
  margin: 0 auto;
  /*background: url("@/assets/login_left4.png");*/
  background-color: #d9d9d9;
  padding: 40px 110px;
  opacity: 0.8;
  border-radius: 20px;
}

/* 背景 */
.login-container {
  position: absolute;
  width: 70%;
  //max-width: 1200px;
  height: calc(100% - 20px);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Log */
.login-title {
  color: #fff;
  text-align: center;
  margin-top: 400px;
  font-size: 48px;
  /*font-family: Microsoft Yahei;*/
}

/* 登陆按钮 */
.submit {
  width: 100%;
  height: 45px;
  font-size: 16px;
}

/* 用户登陆标题 */
.title {
  margin-bottom: 50px;
  color: #fff;
  font-weight: 700;
  font-size: 24px;
  /*font-family: Microsoft Yahei;*/
}

/* 输入框 */
.inputBox {
  height: 45px;
}

/* 输入框内左边距50px */
.ant-input-affix-wrapper .ant-input:not(:first-child) {
  padding-left: 50px;
}

.ant-input-affix-wrapper {
  height: 45px;
}
</style>
